<template>
    <div class="page" ref="pageRef">
        <img src="@/assets/detail-bg.jpg" alt="" class="bg" />
        <div class="container-box">
            <div class="container">
                <div class="title">
                    <div>{{ detail?.awards }}</div>
                </div>
                <img class="logo" :src="logoUrl" alt="" />
                <div class="name">{{ detail?.name }}</div>
                <div class="desc">
                    {{ detail?.desc }}
                </div>
            </div>
        </div>
        <div class="btns" ref="btnsRef">
            <img
                class="btn"
                src="@/assets/share-btn.png"
                alt=""
                @click="hdlCreatePoster"
            />
            <img
                class="btn"
                src="@/assets/back-btn.png"
                alt=""
                @click="$router.push(`/index`)"
            />
        </div>
    </div>
    <div class="zz" :class="{ active: imgUrl }" @click.self="hdlHide">
        <img class="poster" :src="imgUrl" alt="" />
        <div class="notice">长按保存图片 分享到朋友圈</div>
    </div>
</template>

<script setup lang="ts">
    import data0 from "../data/data0";
    import { computed, onMounted, ref } from "vue";
    import html2canvas from "html2canvas";
    import { useRoute } from "vue-router";

    const route = useRoute();
    const id = route.params.id as string;
    const detail = ref();
    onMounted(() => {
        init();
    });
    const init = () => {
        detail.value = data0.find((item) => item.id == Number(id));
    };

    const logoUrl = computed(() => {
        if (detail.value) {
            let awards = detail.value.awards;
            let name = detail.value.name.replace(/:/, "");
            return new URL(
                `../../assets/awards/${awards}  ${name}.png`,
                import.meta.url,
            ).href;
        }
        return "";
    });

    const pageRef = ref();
    const btnsRef = ref();
    const imgUrl = ref();
    const hdlCreatePoster = () => {
        let height =
            pageRef.value.offsetHeight - btnsRef.value.offsetHeight + 20;
        let width = Math.min(window.innerWidth, 540);
        html2canvas(pageRef.value, {
            scale: 1,
            useCORS: true,
            allowTaint: true,
            width: width,
            height: height,
            scrollX: 0,
            scrollY: 0,
            x: 0,
            y: 0,
            ignoreElements: (el) => {
                if (el.classList.contains("btns")) {
                    return true;
                }
                return false;
            },
        }).then((canvas: HTMLCanvasElement) => {
            imgUrl.value = canvas.toDataURL();
        });
    };
    const hdlHide = () => {
        imgUrl.value = "";
    };
</script>

<style lang="scss" scoped src="./AwardsDetail.scss"></style>
